<template>
    <el-tabs
        v-model="activeName"
        type="card"
        class="demo-tabs"
        @tab-click="handleClick"
    >
        <el-tab-pane
            label="计划排班"
            name="first"
        >
            <div class="filter">
                <div class="filter-item">
                    <label for="">所属单位：</label>
                    <el-select
                        v-model="searchForm.depId"
                        class="m-2"
                        placeholder="请选择所属单位"
                        style="width: 145px"
                        :disabled="localTypeUnit != '1'"
                    >
                        <el-option
                            v-for="item in depIdList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>

                <div class="filter-item">
                    <label for="">计划名称：</label>
                    <el-input
                        v-model="searchForm.planName"
                        placeholder="请输入计划名称"
                        style="width: 145px"
                    />
                </div>
                <div class="filter-item">
                    <label for="">计划日期：</label>
                    <el-date-picker
                        style="width: 260px"
                        v-model="searchForm.dateTime"
                        type="daterange"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        :size="'default'"
                        :shortcuts="shortcuts"
                    />
                </div>
                <div class="filter-item">
                    <label for="">班组名称：</label>
                    <el-input
                        v-model="searchForm.teamName"
                        placeholder="请输入班组名称"
                        style="width: 145px"
                    />
                </div>
                <div class="filter-item">
                    <el-button
                        size="default"
                        type="primary"
                        @click="search"
                    >查询</el-button>
                    <el-button
                        size="default"
                        type="primary"
                        @click="reset"
                    >重置</el-button>
                </div>
            </div>

            <div class="filter">
                <div class="filter-item">
                    <el-button
                        type="primary"
                        @click="handleAdd()"
                    >新增计划</el-button>
                </div>
            </div>
            <el-table
                :data="tableData"
                style="width: 100%"
                border
            >
                <el-table-column
                    prop="depId"
                    label="所属单位"
                >
                    <template #default="scope">
                        {{ depNameTranslate(scope.row.depId) }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="planName"
                    label="计划名称"
                />
                <el-table-column
                    prop="planType"
                    label="轮班类型"
                >
                    <template #default="scope">{{
                        scope.row.planType == "1" ? "倒班班次" : "规律班次"
                    }}</template>
                </el-table-column>
                <el-table-column
                    prop="city"
                    label="周期"
                >
                    <template #default="scope">
                        {{ scope.row.cycle }}{{ scope.row.cycleUnit }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="shiftType"
                    label="轮班制度"
                >
                    <template #default="scope">
                        {{
                            scope.row.planType == "1"
                                ? scope.row.shiftType == "1"
                                    ? "每班一天"
                                    : scope.row.shiftType == "2"
                                    ? "连续两天"
                                    : "连续三天"
                                : ""
                        }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="workTeamsNames"
                    label="班组"
                />
                <el-table-column
                    prop="workClassNames"
                    label="班次"
                />
                <el-table-column
                    prop="address"
                    label="计划起止日期"
                >
                    <template #default="scope">
                        {{
                            moment(scope.row.planStartTime).format("YYYY-MM-DD")
                        }}
                        -
                        {{ moment(scope.row.planEndTime).format("YYYY-MM-DD") }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="shiftDayNamesListName"
                    label="每周轮班日"
                >
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="184"
                >
                    <template #default="scope">
                        <el-button
                            text
                            type="primary"
                            size="small"
                            style="margin-left: 0"
                            @click="handleEdit(scope.row)"
                        >
                            编辑
                        </el-button>
                        <el-button
                            text
                            type="primary"
                            size="small"
                            style="margin-left: 0"
                            @click="datadetail(scope.row)"
                        >
                            详情
                        </el-button>
                        <el-button
                            text
                            type="primary"
                            size="small"
                            style="margin-left: 0"
                            @click="optionRecord(scope.row)"
                        >
                            操作记录
                        </el-button>
                        <el-button
                            text
                            type="danger"
                            size="small"
                            style="margin-left: 0"
                            @click="handleDelete(scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                v-model:current-page="searchForm.pageNo"
                v-model:page-size="searchForm.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                class="paginationStyle"
            />
            <el-dialog
                v-model="addVisible"
                :title="dialogTitle"
                width="680"
                :before-close="beforeClose"
            >
                <el-form
                    ref="ruleFormRef"
                    :model="ruleForm"
                    :rules="rules"
                    label-width="auto"
                    class="demo-ruleForm"
                    status-icon
                    :inline="true"
                >
                    <el-form-item
                        label="所属单位："
                        prop="depId"
                        required
                    >
                        <el-select
                            v-model="ruleForm.depId"
                            class="m-2"
                            placeholder="请选择所属单位"
                            style="width: 145px"
                            :disabled="
                                localTypeUnit != '1' ||
                                addVisibleType == 'edit' ||
                                addVisibleType == 'detail'
                            "
                            @change="ruleFormDepId"
                        >
                            <el-option
                                v-for="item in newDepIdList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        label="计划名称："
                        prop="planName"
                        required
                    >
                        <el-input
                            v-model="ruleForm.planName"
                            placeholder="请输入计划名称"
                            style="width: 170px"
                        />
                    </el-form-item>
                    <el-form-item
                        label="计划起止日期："
                        prop="planTime"
                        required
                    >
                        <el-date-picker
                            style="width: 260px"
                            v-model="ruleForm.planTime"
                            type="daterange"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :size="'default'"
                            :shortcuts="shortcuts"
                        />
                    </el-form-item>
                    <!-- 
            <el-form-item label="" prop="continuous" v-if="ruleForm.planTime">
                <el-checkbox
                    v-model="ruleForm.continuous"
                    label="连续"
                    size="large"
                />
            </el-form-item> -->
                    <el-form-item
                        label="轮班类型："
                        prop="planType"
                        required
                    >
                        <el-select
                            v-model="ruleForm.planType"
                            placeholder=""
                            style="width: 170px"
                            @change="planTypeChange"
                        >
                            <el-option
                                label="倒班班次"
                                value="1"
                            />
                            <el-option
                                label="规律班次"
                                value="2"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        label="周期："
                        prop="cycle"
                        required
                    >
                        <!-- <el-input
                    type="number"
                    v-model="ruleForm.cycle"
                    placeholder="请输入数字"
                    style="width: 92px"
                /> -->
                        <el-input-number
                            v-model="ruleForm.cycle"
                            :min="1"
                            :max="30"
                            style="width: 132px; margin-right: 1px"
                            @change="handleChange"
                        />
                        <el-select
                            v-model="ruleForm.cycleUnit"
                            placeholder=""
                            style="width: 110px; margin-left: -2px"
                            @change="cycleUnitChange"
                        >
                            <el-option
                                label="天"
                                value="天"
                            />
                            <el-option
                                label="周"
                                value="周"
                            />
                            <el-option
                                label="月"
                                value="月"
                            />
                            <el-option
                                label="年"
                                value="年"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        label="轮班制度："
                        prop="shiftType"
                        :required="ruleForm.planType == '1'"
                        v-show="ruleForm.planType == '1'"
                    >
                        <el-select
                            v-model="ruleForm.shiftType"
                            placeholder=""
                            style="width: 170px"
                        >
                            <el-option
                                label="每班一天"
                                value="1"
                            />
                            <el-option
                                label="连续两天"
                                value="2"
                            />
                            <el-option
                                label="连续三天"
                                value="3"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        label="每周轮班日："
                        prop="shiftDayNamesList"
                        required
                    >
                        <el-checkbox-group v-model="ruleForm.shiftDayNamesList">
                            <el-checkbox label="0">工作日</el-checkbox>
                            <el-checkbox label="1">节假日</el-checkbox>
                            <el-checkbox label="2">双休日</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>

                    <el-form-item
                        label="班组："
                        prop="workTeamsIdsArr"
                        required
                    >
                        <el-select
                            v-model="ruleForm.workTeamsIdsArr"
                            multiple
                            placeholder="请选择班组"
                            style="width: 400px"
                            @change="workTeamsIdsArrChange"
                        >
                            <el-option
                                v-for="item in workTeamsIdsList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        label="班次："
                        prop="workClassIdsArr"
                        required
                        v-if="ruleForm.planType == '1'"
                    >
                        <el-select
                            v-model="ruleForm.workClassIdsArr"
                            multiple
                            placeholder="请选择班次"
                            style="width: 400px"
                            @change="workClassIdsArrChange"
                        >
                            <el-option
                                v-for="item in workClassIdsList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-form>

                <el-table
                    :data="teamList"
                    v-if="ruleForm.planType == '2'"
                >
                    <el-table-column
                        prop="date"
                        label="日期"
                        width="180"
                    />
                    <el-table-column
                        prop="classes"
                        label="班次"
                    >
                        <template #default="scope">
                            <el-select
                                v-model="scope.row.classes"
                                placeholder="请选择班次"
                                style="width: 300px"
                            >
                                <el-option
                                    v-for="item in workClassIdsList"
                                    :key="item.value"
                                    :label="item.className"
                                    :value="item.value"
                                />
                            </el-select>
                        </template>
                    </el-table-column>
                </el-table>
                <p style="margin-top: 20px; color: #999">
                    注：排班表非即时更新，请前往当前排班页点击【更新排班表】
                </p>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="cancel()">取消</el-button>
                        <!-- <el-button @click="addVisible = false">中止</el-button> -->
                        <el-button
                            v-show="addVisibleType !== 'detail'"
                            type="primary"
                            @click="submitForm(ruleFormRef)"
                        >
                            保存
                        </el-button>
                    </div>
                </template>
            </el-dialog>
            <el-dialog
                v-model="recordListVisible"
                title="操作记录"
                width="1000"
            >
                <div class="filter">
                    <div class="filter-item">
                        <label for="">操作时间：</label>
                        <el-date-picker
                            style="width: 240px"
                            v-model="recordTime"
                            type="daterange"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :size="'default'"
                            :shortcuts="shortcuts"
                        />
                    </div>
                    <div class="filter-item">
                        <el-button
                            size="default"
                            type="warning"
                            @click="searchRecord(currentRowRecord)"
                        >查询</el-button>
                    </div>
                </div>
                <el-table
                    :data="recordList"
                    style="width: 100%"
                >
                    <el-table-column
                        prop="operationType"
                        label="操作类型"
                    />
                    <el-table-column
                        prop="createTime"
                        label="操作时间"
                        width="160"
                    />
                    <el-table-column
                        prop="comment"
                        label="操作内容"
                        width="560"
                    />
                    <el-table-column
                        prop="operationRealname"
                        label="操作人"
                    />
                </el-table>
                <el-pagination
                    v-model:current-page="recordPageNo"
                    v-model:page-size="recordPageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="totalRecord"
                    @size-change="handleSizeChangeRecord"
                    @current-change="handleCurrentChangeRecord"
                    class="paginationStyle"
                />
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="recordListVisible = false">取消</el-button>
                    </div>
                </template>
            </el-dialog>
        </el-tab-pane>
        <el-tab-pane
            label="自由排班"
            name="second"
        >
            <FreeScheduling></FreeScheduling>
        </el-tab-pane>
    </el-tabs>
</template>
<script setup>
import Storage from "@/utils/storage.js"; // storage工具类，简单的封装
import { ElMessage, ElMessageBox } from "element-plus";
import moment from "moment";
import { onMounted, reactive, ref, watch } from "vue";
import FreeScheduling from "./freeScheduling.vue";
const nowTime = new Date().getTime();
const day = new Date().getDay();
const oneDayTime = 24 * 60 * 60 * 1000;
const month = new Date().getMonth();
const planTime = ref([
    new Date().setDate(1),
    new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0),
]);
// api
import schedulingHttp from "@/https/scheduling.js";

const activeName = ref("first");

const handleClick = (tab) => {
    console.log(tab);
};
let searchForm = reactive({
    depId: "",
    planName: "",
    dateTime: [],
    teamName: "",
    pageNo: 1,
    pageSize: 50,
});
const depIdList = ref([
    { label: "全部", value: "1" },
    { label: "星沙厂", value: "2" },
    { label: "城西厂", value: "3" },
    { label: "城北厂", value: "4" },
    { label: "城南厂", value: "5" },
    { label: "城东厂", value: "6" },
]);
const newDepIdList = ref([
    { label: "星沙厂", value: "2" },
    { label: "城西厂", value: "3" },
    { label: "城北厂", value: "4" },
    { label: "城南厂", value: "5" },
    { label: "城东厂", value: "6" },
]);
const depNameTranslate = (depId) => {
    let depName = "";
    depIdList.value.forEach((item) => {
        if (item.value == depId) {
            depName = item.label;
        }
    });
    return depName;
};
const shiftDayNames = ref([
    { label: "工作日", value: "0" },
    { label: "节假日", value: "1" },
    { label: "双休日", value: "2" },
]);
const shiftDayNamesTranslate = (shiftDayId) => {
    let shiftDayName = "";
    shiftDayNames.value.forEach((item) => {
        if (item.value == shiftDayId) {
            shiftDayName = item.label;
        }
    });
    return shiftDayName;
};
const localTypeUnit = ref(Storage.localGet("depId"));
searchForm.depId = localTypeUnit.value;

const shortcuts = [
    {
        text: "本年",
        value: () => {
            return [
                moment().startOf("year"),
                moment().endOf("year"),
            ];
        },
    },
    {
        text: "本月",
        value: () => {
            return [
                moment().startOf("month"),
                moment().endOf("month"),
            ];
        },
    },
    {
        text: "下月",
        value: () => {
            return [
                moment().add(1, 'month').startOf("month"),
                moment().add(1, 'month').endOf("month"),
            ];
        },
    },
    {
        text: "本周",
        value: () => {
            return [
                moment().startOf("week"),
                moment().endOf("week"),
            ];
        },
    },
    {
        text: "下周",
        value: () => {
            return [
                moment().add(1, 'week').startOf("week"),
                moment().add(1, 'week').endOf("week"),
            ];
        },
    },
    {
        text: "本日",
        value: () => {
            return [
                moment(),
                moment(),
            ];
        },
    },
];
const addVisible = ref(false);
const recordListVisible = ref(false);
const tableData = ref([]);
const reset = () => {
    searchForm.depId = localTypeUnit.value;
    searchForm.planTime = [];
    searchForm.planName = "";
    searchForm.planName = "";
    searchForm.pageNo = 1;
    searchForm.pageSize = 10;
    search();
};
const edit = () => { };
const datadetail = (row) => {
    handleEdit(row);
    addVisibleType.value = "detail";

    dialogTitle.value = "详情";
    addVisible.value = true;
};
const handleDelete = (row) => {
    ElMessageBox.confirm(`是否删除该计划【${row.planName}】？`, "删除", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            schedulingHttp
                .workSchedulePlanDelWorkSchedulePlan({ id: row.id })
                .then((res) => {
                    if (res.data.code == 200) {
                        ElMessage({
                            message: "删除成功",
                            type: "success",
                        });
                        search();
                    } else {
                        ElMessage({
                            message: "删除失败！",
                            type: "error",
                        });
                    }
                });
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "取消删除",
            });
        });
};
const addVisibleType = ref("add");
const dialogTitle = ref("新增");
const ruleFormRef = ref();
let ruleForm = reactive({
    depId: "",
    planName: "",
    planTime: "",
    planStartTime: "",
    planEndTime: "",
    planType: "1",
    cycle: 1,
    cycleUnit: "天",
    shiftType: "",
    continuous: false,
    shiftDayNames: "",
    shiftDayNamesList: [],
    workClassIdsArr: [],
    workClassIds: "",
    workClassNames: "",
    workTeamsIdsArr: [],
    workTeamsIds: "",
    workTeamsNames: "",
});
const rules = reactive({
    depId: [
        {
            required: true,
            message: "请输入所属单位",
            trigger: "blur",
        },
    ],
    planName: [
        {
            required: true,
            message: "请输入计划名称",
            trigger: "blur",
        },
    ],
    planTime: [
        {
            required: true,
            message: "请输入计划起止日期",
            trigger: "blur",
        },
    ],
    planType: [
        {
            required: true,
            message: "请输入轮班类型",
            trigger: "blur",
        },
    ],
    cycle: [
        {
            required: true,
            message: "请输入周期",
            trigger: "blur",
        },
    ],
    cycleUnit: [
        {
            required: true,
            message: "请输入每周轮班日",
            trigger: "blur",
        },
    ],
    shiftType: [
        {
            required: ruleForm.planType == "1",
            message: "请选择轮班制度",
            trigger: "blur",
        },
    ],
    shiftDayNamesList: [
        {
            required: true,
            message: "请选择每周轮班日",
            trigger: "blur",
        },
    ],
    workClassIdsArr: [
        {
            required: ruleForm.planType == "1",
            message: "请输入班次类型",
            trigger: "changer",
        },
    ],
    workTeamsIdsArr: [
        {
            required: ruleForm.planType == "1",
            message: "请输入班组类型",
            trigger: "changer",
        },
    ],
});
watch(
    () => ruleForm.planTime,
    (val) => {
        if (addVisibleType.value == "add") return;
        ruleForm.planStartTime = moment(val[0]).format("YYYY-MM-DD");
        ruleForm.planEndTime = moment(val[1]).format("YYYY-MM-DD");
    },
    { deep: true }
);
const ruleFormDepId = () => {
    getWorkTeams();
    getWorkClass();
};
watch(
    () => ruleForm.depId,
    (val) => {
        getWorkTeams();
        getWorkClass();
    },
    { deep: true }
);
watch(
    () => ruleForm.shiftDayNamesList,
    (val) => {
        ruleForm.shiftDayNames = val.join(",");
    },
    { deep: true }
);
const cycleData = ref([{ date: "第一天", classes: "" }]);
watch(
    () => ruleForm.continuous,
    (val) => { },
    { deep: true }
);
const teamList = ref([
    {
        date: "第一天",
    },
]);
watch(
    () => ruleForm.cycleUnit,
    (val) => {
        console.log(val);
        handleChange(ruleForm.cycle);
    },
    { deep: true }
);
watch(
    () => ruleForm.planType,
    (val) => { },
    { deep: true }
);
const planTypeChange = () => {
    handleChange(ruleForm.cycle);
};
const handleChange = (value) => {
    console.log(value);
    teamList.value = [];
    for (let i = 0; i < value; i++) {
        teamList.value.push({
            date: `第${i + 1}${ruleForm.cycleUnit}`,
            classes: "",
        });
    }
};
const cycleUnitChange = (value) => {
    handleChange(ruleForm.cycle);
};
const workClassIdsArrChange = (list) => {
    ruleForm.workClassIds = list.join(",");
    let nameList = [];
    list.forEach((m) => {
        workClassIdsList.value.forEach((item) => {
            if (item.id == m) {
                nameList.push(item.className);
            }
        });
    });
    ruleForm.workClassNames = nameList.join(",");
};
const workTeamsIdsArrChange = (list) => {
    if (ruleForm.planType == "2" && list.length > 1) {
        list.shift(0);
    }
    ruleForm.workTeamsIds = list.join(",");
    let nameList = [];
    list.forEach((m) => {
        workTeamsIdsList.value.forEach((item) => {
            if (item.id == m) {
                nameList.push(item.teamName);
            }
        });
    });
    ruleForm.workTeamsNames = nameList.join(",");
};
let total = ref(0);
const handleSizeChange = (val) => {
    searchForm.pageSize = val;
    search();
};
const handleCurrentChange = (val) => {
    searchForm.pageNo = val;
    search();
};
// 查询班次信息;
const search = async () => {
    let params = {
        ...searchForm,
        planType: "1",
        startTime: searchForm.dateTime[0]
            ? moment(searchForm.dateTime[0]).format("YYYY-MM-DD")
            : "",
        endTime: searchForm.dateTime[0]
            ? moment(searchForm.dateTime[1]).format("YYYY-MM-DD")
            : "",
    };
    const res = await schedulingHttp.workSchedulePlanQueryWorkSchedulePlan(
        params
    );
    if (res.data.code == 200) {
        res.data.data.records.forEach((item) => {
            item.shiftDayNamesList = item.shiftDayNames
                ? item.shiftDayNames.split(",")
                : [];
            let arr = [];
            item.shiftDayNamesList.forEach((m) => {
                if (m == "0") {
                    arr.push("工作日");
                } else if (m == "1") {
                    arr.push("节假日");
                } else if (m == "2") {
                    arr.push("双休日");
                }
            });
            item.shiftType = item.shiftType + "";
            item.shiftDayNamesListName = arr.join(",");
        });
        tableData.value = res.data.data.records;
        total.value = res.data.data.total;
    }
};
const workTeamsIdsList = ref([]);
const workClassIdsList = ref([]);
// 查询班组信息
const getWorkTeams = async () => {
    let params = {
        depId: ruleForm.depId,
        planType: "1",
        pageNo: 1,
        pageSize: 10000,
    };
    const res = await schedulingHttp.workteamsQueryWorkTeams(params);
    if (res.data.code == 200) {
        res.data.data.records.forEach((item) => {
            item.label = item.teamName;
            item.value = item.id + "";
        });
        workTeamsIdsList.value = res.data.data.records;
    }
};
// 查询班次信息;
const getWorkClass = async () => {
    let params = {
        depId: ruleForm.depId,
        isDelete: "0",
        pageNo: 1,
        pageSize: 1000,
    };
    const res = await schedulingHttp.workClassQueryWorkClass(params);
    if (res.data.code == 200) {
        res.data.data.records.forEach((item) => {
            item.label = item.className;
            item.value = item.id + "";
        });
        workClassIdsList.value = res.data.data.records;
        console.log(workClassIdsList.value, "workClassIdsList");
        if (ruleForm.workClassIds) {
            teamList.value = [];
            if (ruleForm.planType == "2") {
                ruleForm.workClassIds.split(",").forEach((item, index) => {
                    teamList.value.push({
                        date: `第${index + 1}${ruleForm.cycleUnit}`,
                        classes: item,
                    });
                });
            }
        }
    }
};

const handleAdd = (type) => {
    ruleForm.depId = localTypeUnit.value == "1" ? "" : localTypeUnit.value;
    ruleForm.planName = "";
    ruleForm.planTime = "";
    ruleForm.planStartTime = "";
    ruleForm.planEndTime = "";
    ruleForm.planType = "1";
    ruleForm.cycle = 1;
    ruleForm.cycleUnit = "天";
    ruleForm.shiftType = "";
    ruleForm.false = false;
    ruleForm.shiftDayNames = "";
    ruleForm.shiftDayNamesList = [];
    ruleForm.workClassIdsArr = [];
    ruleForm.workClassIds = "";
    ruleForm.workClassNames = "";
    ruleForm.workTeamsIdsArr = [];
    ruleForm.workTeamsIds = "";
    ruleForm.workTeamsNames = "";
    addVisible.value = true;
    addVisibleType.value = "add";
    dialogTitle.value = "新增";
    teamList.value.push({
        date: `第${i + 1}${ruleForm.cycleUnit}`,
        classes: "",
    });
};
const handleEdit = (row) => {
    addVisible.value = true;
    addVisibleType.value = "edit";
    dialogTitle.value = "编辑";
    ruleForm = row;
    ruleForm.depId = ruleForm.depId + "";
    getWorkClass();
    getWorkTeams();
    ruleForm.planType = ruleForm.planType + "";
    ruleForm.shiftType = ruleForm.shiftType + "";
    if (ruleForm.planEndTime == "2099-01-01") {
        ruleForm.planEndTime = "2099-01-01";
        ruleForm.continuous = true;
    } else {
        ruleForm.planEndTime = moment(ruleForm.planEndTime).format(
            "YYYY-MM-DD"
        );
        ruleForm.continuous = false;
    }
    ruleForm.planStartTime = moment(ruleForm.planStartTime).format(
        "YYYY-MM-DD"
    );
    ruleForm.planTime = [ruleForm.planStartTime, ruleForm.planEndTime];
    ruleForm.workClassIdsArr = ruleForm.workClassIds.split(",");
    let workClassIdsArrList = [];
    ruleForm.workClassIdsArr.forEach((item, index) => {
        workClassIdsArrList[index] = item;
    });
    ruleForm.workClassIdsArr = workClassIdsArrList;

    ruleForm.workTeamsIdsArr = ruleForm.workTeamsIds.split(",");

    let workTeamsIdsArrList = [];
    ruleForm.workTeamsIdsArr.forEach((item, index) => {
        workTeamsIdsArrList[index] = item;
    });
    ruleForm.workTeamsIdsArr = workTeamsIdsArrList;
    console.log(ruleForm, "row");
};

const beforeClose = async () => {
    addVisible.value = false;
    search();
};
const cancel = async () => {
    addVisible.value = false;
    search();
};
const submitForm = async (formEl) => {
    if (ruleForm.planType == "2") {
        let hasClasses = true;
        teamList.value.forEach((item) => {
            console.log(11111111, "ruleForm.planType", item.classes);
            if (item.classes == "" || item.classes == undefined) {
                hasClasses = false;
            }
        });
        if (!hasClasses) {
            ElMessage({
                type: "error",
                message: "请填写班次",
            });
            return;
        }
    }
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log(ruleForm.planType, "planType");
            if (ruleForm.planType == "2") {
                let workClassIdsArr = [];
                let workClassNamesArr = [];
                teamList.value.forEach((item) => {
                    workClassIdsArr.push(item.classes);
                });
                ruleForm.workClassIds = workClassIdsArr.join(",");
                ruleForm.workClassIdsArr = workClassIdsArr;
                console.log(workClassNamesArr, "workClassIdsList");
                workClassIdsArr.forEach((m) => {
                    workClassIdsList.value.forEach((item) => {
                        if (item.id == m) {
                            workClassNamesArr.push(item.label);
                        }
                    });
                });
                ruleForm.workClassNames = workClassNamesArr.join(",");
            }
            console.log(ruleForm, "ruleForm");
            let params = {
                ...ruleForm,
                shiftDayNames: ruleForm.shiftDayNamesList.join(","),
                planStartTime: ruleForm.planTime[0]
                    ? moment(ruleForm.planTime[0]).format("YYYY-MM-DD")
                    : "",
                planEndTime: ruleForm.planTime[1]
                    ? moment(ruleForm.planTime[1]).format("YYYY-MM-DD")
                    : "",
            };
            if (ruleForm.continuous) {
                params.planEndTime = "2099-01-01";
            }
            if (addVisibleType.value == "add") {
                schedulingHttp
                    .workSchedulePlanAddWorkSchedulePlan(params)
                    .then((res) => {
                        if (res.data.code == 200) {
                            addVisible.value = false;
                            ElMessage({
                                message: "新增成功",
                                type: "success",
                            });
                            search();
                        } else {
                            ElMessage({
                                message: res.data.msg,
                                type: "error",
                            });
                        }
                    });
            } else if (addVisibleType.value == "edit") {
                schedulingHttp
                    .workSchedulePlanUpdateWorkSchedulePlan(params)
                    .then((res) => {
                        if (res.data.code == 200) {
                            addVisible.value = false;
                            ElMessage({
                                message: "修改成功",
                                type: "success",
                            });
                            search();
                        } else {
                            ElMessage({
                                message: res.data.msg,
                                type: "error",
                            });
                        }
                    });
            }
        } else {
            ElMessage({
                message: "提交错误",
                type: "error",
            });
        }
    });
};
const recordTime = ref([]);
const recordList = ref([]);
const currentRowRecord = ref();
const optionRecord = async (row) => {
    recordListVisible.value = true;
    currentRowRecord.value = row;
    recordTime.value[0] = moment().format("YYYY-MM-DD");
    recordTime.value[1] = moment().add(1, "day").format("YYYY-MM-DD");
    searchRecord(currentRowRecord.value);
};
const recordPageNo = ref(1);
const recordPageSize = ref(10);

let totalRecord = ref(0);
const handleSizeChangeRecord = (val) => {
    recordPageSize.value = val;
    searchRecord(currentRowRecord.value);
};
const handleCurrentChangeRecord = (val) => {
    recordPageNo.value = val;
    searchRecord(currentRowRecord.value);
};
const searchRecord = async (row) => {
    let params = {
        businessId: row.id,
        operationType: "",
        businessType: "排班计划",
        startTime:
            recordTime.value.length > 0
                ? moment(recordTime.value[0]).format("YYYY-MM-DD")
                : "",
        endTime:
            recordTime.value.length > 0
                ? moment(recordTime.value[1]).format("YYYY-MM-DD")
                : "",
        pageNo: recordPageNo.value,
        pageSize: recordPageSize.value,
    };
    const res = await schedulingHttp.operationRecordsQueryOperationRecords(
        params
    );
    console.log(res);
    if (res.data.code == 200) {
        recordList.value = res.data.data.records;
        totalRecord.value = res.data.data.total;
    }
};
onMounted(() => {
    search();
    getWorkTeams();
    getWorkClass();
});
</script>

<style scoped lang="less">
.filter {
    flex-wrap: wrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    .filter-item {
        margin: 0 15px 15px 0px;
        display: flex;
        flex-direction: row;
        align-items: center;
        label {
            font-size: 14px;
            color: #333;
            display: inline-block;
            white-space: nowrap;
        }
    }
}
</style>